<template>
    <Modal :is-show-modal="isShowEditModal" modal-title="编辑事项">
        <p class='topic'>时间：{{ formatedDateTime }}</p>
        <p class='topic'>
            <textarea class='text-area' v-model="inputValue" :defaultValue="data.content" />
        </p>

        <p class='topic'>状态：
            <input v-model="checkValue" type="checkbox" :checked="data.completed === '0' ? false : true"/>
        </p>
        <button class='comfirm-btn' @click="formatNewData">提交</button>
    </Modal>
</template>

<script>
import Modal from "./Modal.vue";
import tools from "utils/tools";

export default {
    name:'EditModel',
    components: {
        Modal
    },
    props: {
        isShowEditModal: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            inputValue: '',
            checkValue: false,
            formatedDateTime: null
        }
    },
    watch: {
        data(val) {
            this.inputValue = val.content;
            this.checkValue = val.completed === '0' ? false : true;
            this.formatedDateTime = tools.formatDateTime(Number(val.id));
        }
    },
    methods: {
        formatNewData() {
            if (this.inputValue.trim() === 0) {
                return;
            }
            const newData = {
                id: new Date().getTime(),
                content: this.inputValue.trim(),
                completed: this.checkValue ? '1':'0'
            }
            this.$emit('submit-edit', newData, this.data.id);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';
.topic {
    font-size: .14rem;
    margin-bottom: .1rem;
}

.comfirm-btn {
    width: 100%;
    padding: 0.1rem;
    margin-top: .4rem;
    font-size: .14rem;
    white-space: nowrap;
    border-radius: 4px;
    color: #fff;
    background-color: $defaultBgColor;
    border-color:$defaultBgColor;
}

.text-area {
    width: 100%;
    min-height: 1rem;
    border: 1px solid #ddd;
    padding: .05rem;
}
</style>